<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
div{
	width: 400px;
	height: 300px;
}
</style>
<body>
<div class="main">
	<span id="m_span">这是一个span</span>
</div>
<div id="div"></div>
<script type="text/javascript">
	/*
	function getClass(cla,tag){
		//在最高-最低
		if (document.getElementsByClassName) {
			alert("chrom");
			return document.getElementsByClassName(cla);
			
		}else if (document.querySelectorAll) {}{
			alert("IE8");
			return document.querySelectorAll("."+cla);
		}else{
			alert("IE7");
		//*全部，有tag参数，没有就取"*";
			var tag = tag||"*";
			var _arr = [];//储存符合条件的dom元素
			var domArr = document.getElementsByTagName(tag);
			for (var i = 0; i < domArr.length; i++) {
				if(domArr[i].className.indexOf("main")!=-1){
					_arr.push(domArr[i]);
				}
			}
			return _arr;
		}
	}
getClass("main")[0].innerHTML = "<h1>Class</h1>";

function getStyle(ele){
	if (ele.currentStyle) {
		return ele.currentStyle;
	}else{
		return getComputedStyle(ele);
	}
}
res.innerHTML = getStyle(span).fontSize;

*/
/*
document.getElementsByClassName()
IE8报错：对象不支持"getElementsByClassName"属性或方法

 */
/*、<div class="main">
	<span id="m_span">这是一个span</span>
</div>
宽400px，高300px;
--通过class获取该div元素
--获取div内文字的大小
--给div绑定点击事件，如果点击了span，将div背景设置为黑色，检测span后面是否有button，如果没有则添加一个
--点击空白处将背景设置为红色*/ 
// var div = document.getElementsByClassName("main")[0];
// var zt = window.getComputedStyle(div).fontSize;
// console.log(zt)
// var span = document.querySelectorAll("span")[0];
// var body = document.querySelectorAll("body")[0];
// var btn = document.createElement("button");
// document.addEventListener("click",function(){   
// 	div.style.background = "red";
// 	div.appendChild(btn);
// },true);
// window.onclick = function(){
// 	console.log("dhwajk0");
// }
// span.addEventListener("click",function(){
// 	div.style.background = "black";
// 	div.appendChild(btn);
// },true);
//2 在数组[1,2,3,4,5]中查找3所在的位置
// var arr = [1,2,3,4,5];
// 	console.log(arr.indexOf(3));
//3数组[3,7,4,8,9]
//--判断数组元素是否都>5
//--判断数组中是否有能被7整除的数
//--选出能被3整除的数组
// var arr1 = [3,7,4,8,9];
// 	console.log(arr1.every(function(a,b){return a>5}));
// 	console.log(arr1.some(function(a,b){return a%7==0}))

// 	for (var i = 0; i < arr1.length; i++) {
// 		if(arr1[i]%3==0){
// 			console.log(arr1[i]);
// 		}
// 	}
//4.
var arr3 = [{
title:"第一章 初始HTML5"
,page:2,
	contents:
	[{title:"1.1 HTML5的基本概念"
	,page:2,

		contents:
		[{title:"1.1.1 HTML的发展历程"
		,page:3},
		{title:"1.1.2 什么是HTML5"
		,page:5},
		{title:"1.1.3 HTML5文件的基本结构"
		,page:7}
		]},

	{title:"1.2 HTML5的优势"
	,page:12,

		contents:[{title:"1.2.1 解决了跨浏览器问题"
		,page:15},
		{title:"1.2.2 新增了多个特性"
		,page:24}
		]}
		]},


{title:"第二章 HTML5网页的文档结构"
,page:30,
	contents:[{title:"2.1 HTML5文件的基本结构"
	,page:34,

		contents:[{title:"2.1.1HTML5页面的整体结构"
		,page:35},
		{title:"2.1.2 HTML5新增的结构标记"
		,page:37}]},

	{title:"2.2 HTML5基本标记详解"
	,page:41,
		contents:[{title:"2.2.1 文档类型说明"
		,page:45},
		{title:"2.2.2 HTML标记" 
		,page:50},
		{title:"2.2.3 网页的主体标记<body>"
		,page:53}]
	}]
}];

		var str = "";
  var shu=document.getElementById("div");

  function $(s){
  	return document.querySelectorAll(s);
  	  }
//目录数组就是arr3  str是要显示的内容  title是查找的内容  contents是内容的爸爸
  	for (var i = 0; i < arr3.length; i++) {
  		//循环str 是要显示的内容 arr3的i项是两个大的块
  		//arr3[i]的title是开头的内容
  		str+=arr3[i].title+"<br>";
  		for (var j = 0; j < arr3[i].contents.length; j++) {
  			//arr3[i].contents[j].title
  			//第二个级别被文字内容
  			str+=arr3[i].contents[j].title+"<br>";
  			for (var k = 0; k < arr3[i].contents[j].contents.length; k++) {
  				//第三个级别的文字内容，要找找集合（你要找的他爹）找到之后再找内容
  				str+=arr3[i].contents[j].contents[k].title+"<br>";
  			}
  		}
  	}
 shu.innerHTML = str;
      	  	 	// if (e.target.innerHTML == arr3[i].title) {
      	  	 	// 	for (var z = 0; z < arr3[i].; z++) {
      	  	 	// 		Things[i]
      	  	 	// 	}
     
//console.log(lis)




// //兼容性
// if (btn.addEventListener) {
// 	//第三个参数：控制是冒泡还是捕获
// 	btn.addEventListener("click",function(e){
// 		res.innerHTML = e.srcElement.tagName+"chrome"
// 		alert("button");
// 	})
// 	document.addEventListener("click",function(){
// 		alert("document");
// 	})
// }else{
// 	btn.attachEvent("onclick",function(e){
// 		var e = e||window.event;
// 		res.innerHTML = e.srcElement.tagName+"IE78";
// 	})
// }


</script>
</body>
</html>